<template>
	<div>
		<el-form-item label="跳转类型：">
			<el-select v-model="action.actionType">
				<el-option label="商品详情" :value="0"></el-option>
				<el-option label="活动页面" :value="1"></el-option>
				<el-option label="小程序内部页面" :value="2"></el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="跳转动作：" v-if="action.actionType != 2">
			<el-button v-if="action.actionType == 0">选择商品</el-button>
			<el-input v-if="action.actionType == 1" v-model="action.actionDetail" placeholder="请输入页面http链接"></el-input>
		</el-form-item>

		<el-form-item label="跳转页面：" v-if="action.actionType == 2">
			<el-select v-model="action.miniPage">
				<el-option label="首页" value="/pages/index/index"></el-option>
				<el-option label="个人中心页" value="/pages/personal/index"></el-option>
				<el-option label="全部商品页" value="/pages/goodsList/index"></el-option>
				<el-option label="购物车" value="/pages/shoppingCart/index"></el-option>
				<el-option label="订单列表页" value="/pages/index3/index"></el-option>
				<el-option label="订阅消息页" value="/pages/index3/index"></el-option>
			</el-select>
		</el-form-item>
	</div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, watch } from 'vue';

const action = reactive({
	actionType: 0,
	actionDetail: '',
	miniPage: '',
});

const props = defineProps({
	data: {
		type: Object,
		default: () => {},
	},
	index: {
		type: Number,
		default: () => 0,
	},
});

watch(
	() => action,
	(val) => {
		if (val.actionType) {
			change();
		}
	},
	{
		deep: true,
	}
);

onBeforeMount(() => {
	Object.assign(action, {
		actionType: props.data.actionType ? props.data.actionType : 0,
		actionDetail: props.data.actionDetail,
		miniPage: props.data.miniPage,
	});
});

const emit = defineEmits(['change']);
function change() {
	emit('change', {
		action: action,
		index: props.index,
	});
}
</script>

<style lang="scss" scoped></style>
